<template>
  <div class="home">
    <div class="starsec"></div>
    <div class="header">
      <el-row>
        <el-col :span="4">
          <div class="header_left"><img src="../assets/logo.png" /></div
        ></el-col>
        <el-col :span="14">
          <div class="header_main">
            <el-input
              v-model="search_value"
              class="search"
              placeholder="Type something"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input></div
        ></el-col>
        <el-col :span="3">
          <div class="header_right_1">
            <el-select v-model="value" class="select" placeholder="Select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="header_right_2">
            <el-avatar class="avatar" :size="40" :src="user_url" />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- mian -->
    <div class="main">
        <div class="home-card">
            <el-card class="card" v-for="item in list1" :key="item.label">
                <img :src="item.url" class="image" />
                <div style="padding: 14px">
                    <span>{{ item.label }}</span>
                    <div class="bottom">
                        <el-button text class="button" @click="handleClick(item.label, item1)"
                        >转换</el-button
                        >
                    </div>
                </div>
            </el-card>
            <el-card class="card" v-for="item in list2" :key="item.label">
                <img :src="item.url" class="image" />
                <div style="padding: 14px">
                    <span>{{ item.label }}</span>
                    <div class="bottom">
                        <el-button :type='primary' text bg class="button" @click="handleClick(item.label, item1)"
                        >转换</el-button
                        >
                    </div>
                </div>
            </el-card>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
      <div class="w1200"></div>
    </div>
    <div class="footer_bottom">
      <div class="copyright">
        2023 &copy;星域-星闪copyright版权所有
      </div>
  </div>
    <div>
        <el-dialog
            v-model="item1.flag"
            :title="item1.title"
            width="50%"
            align-center
        >
            <Upload :label="item1.title" :changeId="item1.id"></Upload>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="item1.flag = false;">取消</el-button>
        <el-button type="primary" @click="item1.flag = false;">
          确认
        </el-button>
      </span>
            </template>
        </el-dialog>

    </div>

  </div>
</template>

<script>
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import Upload from "@/components/Upload.vue";
export default {
  name: 'Home',
    components:{
      Upload,
    },
    setup(){
      const search_value="";
      const value="";
      const user_url=ref("");
      const options = [
            {
                value: 'PDF转World',
                label: 'PDF转World',
            },
            {
                value: 'PDF转PPT',
                label: 'PDF转PPT',
            },
            {
                value: 'PDF转图片',
                label: 'PDF转图片',
            },
            {
                value: 'PDF转Excel',
                label: 'PDF转Excel',
            },
            {
                value: 'World转PDF',
                label: 'World转PDF',
            },
            {
                value: 'PPT转PDF',
                label: 'PPT转PDF',
            },
            {
                value: '图片转PDF',
                label: '图片转PDF',
            },
            {
                value: 'Excel转PDF',
                label: 'Excel转PDF',
            },
            {
              value: 'More',
              label: 'More'
            }
        ];
      const list1 = [
          {
              value: 'PDF转World',
              label: 'PDF转World',
              url:'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1//style/images/p1.png'
          },
          {
              value: 'PDF转PPT',
              label: 'PDF转PPT',
              url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1//style/images/p2.png'
          },
          {
              value: 'PDF转Image',
              label: 'PDF转Image',
              url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1//style/images/p3.png'
          },
          {
              value: 'PDF转Excel',
              label: 'PDF转Excel',
              url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1/style/images/p4.png'
          },

      ];
      const list2 = [
            {
                value: 'World转PDF',
                label: 'World转PDF',
                url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1/style/images/p5.png'
            },
            {
                value: 'PPT转PDF',
                label: 'PPT转PDF',
                url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1/style/images/p6.png'
            },
            {
                value: 'Image转PDF',
                label: 'Image转PDF',
                url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1/style/images/p7.png'
            },
            {
                value: 'Excel转PDF',
                label: 'Excel转PDF',
                url: 'http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1/style/images/p8.png'
            },


        ];
      let item1=ref({
          title:'文件转换',
          flag:false,
          id:""
      });
      const handleClick = (label,item) => {
            item.title=label;
            item.flag=true;
            switch (label) {
                case 'PDF转World':
                    item.id="1";
                    break
                case 'PDF转PPT':
                    item.id="2";
                    break
                case 'PDF转Image':
                    item.id="3";
                    break
                case 'PDF转Excel':
                    item.id="4";
                    break
                case 'World转PDF':
                    item.id="5";
                    break
                case 'PPT转PDF':
                    item.id="6";
                    break
                case 'Image转PDF':
                    item.id="7";
                    break
                case 'Excel转PDF':
                    item.id="8";
                    break
            }
      };

      return{
          search_value,
          value,
          options,
          list1,
          list2,
          user_url,
          item1,
          handleClick,
          Search
      };
    },

};
</script>
<style scoped>
.header,
.main,
.footer {
  width: 80%;
  margin: 0 auto;
}
.header {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding-top: 3px;
  height: 54px;
  margin: 20px auto;
}
.search {
  margin-top: 4px;
}
.select {
  margin-top: 4px;
  margin-left: 20px;
}
.avatar {
  margin-top: 4px;
}

.mian .el-col {
  padding: 0 !important;
}
.home-card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.card {
    width: 23.5%;
    margin-bottom: 20px;
    z-index: 10;
}
.card:hover {
    transform: scale(1.01);
    box-shadow: 2px 2px 4px 2px #ccc;
}
.el-card {
    padding: 0 !important;
}
.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.image {
    margin: 20px auto;
    width: 50%;
    display: block;
}

.footer {
  background: url(http://soft.weiyinwang.cn/assets/sites/pdfconverter/model1/style/images/bg3.png)
    center center no-repeat;
  height: 500px;
  cursor: pointer;
}
.footer_bottom .copyright{
    height: 40px;
    line-height: 40px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
/* 粒子特效 */
.starsec {
    content: " ";
    position: absolute;
    width: 5px;
    height: 5px;
    /* 背景透明 */
    background: transparent;
    box-shadow: 571px 173px #00bbd433, 1732px 143px #00bcd4, 1745px 454px #ff5722,
      234px 784px #00bcd4, 1793px 1123px #ff9800, 1076px 504px #03a9f4,
      633px 601px #ff5722, 350px 630px #ffeb3b, 1164px 782px #00bcd4,
      76px 690px #3f51b5, 1825px 701px #cddc39, 1646px 578px #ffeb3b,
      544px 293px #2196f3, 445px 1061px #673ab7, 928px 47px #00bcd4,
      168px 1410px #8bc34a, 777px 782px #9c27b0, 1235px 1941px #9c27b0,
      104px 1690px #8bc34a, 1167px 1338px #e91e63, 345px 1652px #009688,
      1682px 1196px #f44336, 1995px 494px #8bc34a, 428px 798px #ff5722,
      340px 1623px #f44336, 605px 349px #9c27b0, 1339px 1344px #673ab7,
      1102px 1745px #3f51b5, 1592px 1676px #2196f3, 419px 1024px #ff9800,
      630px 1033px #4caf50, 1995px 1644px #00bcd4, 1092px 712px #9c27b0,
      1355px 606px #f44336, 622px 1881px #cddc39, 1481px 621px #9e9e9e,
      19px 1348px #8bc34a, 864px 1780px #e91e63, 442px 1136px #2196f3,
      67px 712px #ff5722, 89px 1406px #f44336, 275px 321px #009688,
      592px 630px #e91e63, 1012px 1690px #9c27b0, 1749px 23px #673ab7,
      94px 1542px #ffeb3b, 1201px 1657px #3f51b5, 1505px 692px #2196f3,
      1799px 601px #03a9f4, 656px 811px #00bcd4, 701px 597px #00bcd4,
      1202px 46px #ff5722, 890px 569px #ff5722, 1613px 813px #2196f3,
      223px 252px #ff9800, 983px 1093px #f44336, 726px 1029px #ffc107,
      1764px 778px #cddc39, 622px 1643px #f44336, 174px 1559px #673ab7,
      212px 517px #00bcd4, 340px 505px #fff, 1700px 39px #fff,
      1768px 516px #f44336, 849px 391px #ff9800, 228px 1824px #fff,
      1119px 1680px #ffc107, 812px 1480px #3f51b5, 1438px 1585px #cddc39,
      137px 1397px #fff, 1080px 456px #673ab7, 1208px 1437px #03a9f4,
      857px 281px #f44336, 1254px 1306px #cddc39, 987px 990px #4caf50,
      1655px 911px #00bcd4, 1102px 1216px #ff5722, 1807px 1044px #fff,
      660px 435px #03a9f4, 299px 678px #4caf50, 1193px 115px #ff9800,
      918px 290px #cddc39, 1447px 1422px #ffeb3b, 91px 1273px #9c27b0,
      108px 223px #ffeb3b, 146px 754px #00bcd4, 461px 1446px #ff5722,
      1004px 391px #673ab7, 1529px 516px #f44336, 1206px 845px #cddc39,
      347px 583px #009688, 1102px 1332px #f44336, 709px 1756px #00bcd4,
      1972px 248px #fff, 1669px 1344px #ff5722, 1132px 406px #f44336,
      320px 1076px #cddc39, 126px 943px #ffeb3b, 263px 604px #ff5722,
      1546px 692px #f44336;
    animation: animStar 140s linear infinite;
  }
  @keyframes animStar {
    0% {
      transform: translateY(0px);
    }

    100% {
      transform: translateY(-1800px);
    }
  }
</style>
